import axios from 'axios';
import React, { Component } from 'react';
import { Router } from 'umi';
import { history } from 'umi';
class ShowPrd extends Component {
  static defaultProps = {
    containerStyle: {
      width: 400,
      height: 800,
    },
    formList: [
      {
        form_0:
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=94996843,1878572032&fm=26&gp=0.jpg',
      },
      {
        form_1:
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
      },
      {
        form_2:
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=94996843,1878572032&fm=26&gp=0.jpg',
      },
      {
        form_3:
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
      },
    ],
    hotAreas: [
      {
        x: 0,
        y: 0,
        xRate: 0,
        yRate: 0,
        width: '74px',
        height: '76px',
        partId: 'form_0',
        type: 'url',
      },
      {
        x: 106,
        y: 0,
        xRate: 0.2826666666666667,
        yRate: 0,
        width: '269px',
        height: '60px',
        partId: 'form_1',
        type: 'url',
      },
      {
        x: 0,
        y: 108,
        xRate: 0,
        yRate: 0.1619190404797601,
        width: '165px',
        height: '64px',
        partId: 'form_2',
        type: 'url',
      },
      {
        x: 0,
        y: 258,
        xRate: 0,
        yRate: 0.3868065967016492,
        width: '181px',
        height: '66px',
        partId: 'form_3',
        type: 'url',
      },
    ],
  };

  componentDidMount() {
    axios
      .get('/getImgData')
      .then(data => {
        console.log(data);
        // data {hotAreas,formList}
      })
      .catch(err => {
        console.log(err);
      });
  }

  handleClick = item => {
    history.push('/showPrd?imgid=111');
    console.log(item);
  };
  renderHot = () => {
    const { hotAreas } = this.props;
    return hotAreas.map((item, index) => {
      const { width, height, yRate, xRate } = item;
      return (
        <div
          onClick={this.handleClick.bind(this, item)}
          style={{
            position: 'absolute',
            width,
            height,
            top: yRate * 800,
            left: xRate * 400,
            backgroundColor: 'yellow',
            opacity: 0.2,
          }}
        />
      );
    });
  };
  render() {
    return (
      <div>
        <div
          style={{
            ...this.props.containerStyle,
            backgroundSize: '400px 800px',
            backgroundImage: `url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1208176849,1584967837&fm=26&gp=0.jpg')`,
          }}
        >
          {this.renderHot()}
        </div>
      </div>
    );
  }
}

export default ShowPrd;
